<template>
  <div class="province-active-box">
    <div class="select-box">
      <div class="province-box">
        <div class="select1">
          <div class="areas-box">
            <div>省：</div>
            <el-select v-model="gets.province" @change="queryF">
              <el-option
                v-for="item in area.province"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <div class="active-time">
      <div class="block-year">
        <span>按年：</span>
        <el-date-picker
          v-model="valueTime.year"
          type="year"
          placeholder="请选择年份">
        </el-date-picker>
      </div>
      <div class="block-month">
        <span>按月份：</span>
        <el-date-picker
          v-model="valueTime.month"
          type="month"
          placeholder="请选择月份">
        </el-date-picker>
      </div>
    </div>


    <div>
      <div class="sort-box">
        <span>销量排序：</span>
        <el-radio-group v-model="radio">
          <el-radio :label="0">全部</el-radio>
          <el-radio :label="1">降序</el-radio>
          <el-radio :label="2">升序</el-radio>
        </el-radio-group>
      </div>

      <div class="myTable">
        <el-table
          :data="datas"
          style="width: 100%"
          :default-sort = "sort"
          >
          <el-table-column
            prop="province"
            label="省"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            prop="active_value"
            label="总活跃度"
            sortable
            >
          </el-table-column>
          </el-table>
      </div>
          

    </div>
  </div>
</template>

<script>
import axios from "axios"
export default {
  created() {
    this.getData();
  },

  data() {
    return {
      valueTime: {
        year: "",
        month: "",
      },
      gets: {
        province: "全部省份",
      },
      area: {
        province: [
          {label:"全部省份",value:"全部省份"},
          {label:"北京市",value:"北京市"},
          {label:"天津市",value:"天津市"},
          {label:"四川省",value:"四川省"},
          {label:"河北省",value:"河北省"},
          {label:"山西省",value:"山西省"},
          {label:"内蒙古自治区",value:"内蒙古自治区"},
          {label:"辽宁省",value:"辽宁省"},
          {label:"吉林省",value:"吉林省"},
          {label:"黑龙江省",value:"黑龙江省"},
          {label:"上海市",value:"上海市"},
          {label:"江苏省",value:"江苏省"},
          {label:"浙江省",value:"浙江省"},
          {label:"安徽省",value:"安徽省"},
          {label:"福建省",value:"福建省"},
          {label:"江西省",value:"江西省"},
          {label:"山东省",value:"山东省"},
          {label:"河南省",value:"河南省"},
          {label:"湖北省",value:"湖北省"},
          {label:"湖南省",value:"湖南省"},
          {label:"广东省",value:"广东省"},
          {label:"广西壮族自治区",value:"广西壮族自治区"},
          {label:"海南省",value:"海南省"},
          {label:"重庆市",value:"重庆市"},
          {label:"贵州省",value:"贵州省"},
          {label:"云南省",value:"云南省"},
          {label:"西藏自治区",value:"西藏自治区"},
          {label:"陕西省",value:"陕西省"},
          {label:"甘肃省",value:"甘肃省"},
          {label:"青海省",value:"青海省"},
          {label:"宁夏回族自治区",value:"宁夏回族自治区"},
          {label:"新疆维吾尔自治区",value:"新疆维吾尔自治区"},
          {label:"台湾省",value:"台湾省"},
          {label:"香港特别行政区",value:"香港特别行政区"},
          {label:"澳门特别行政区",value:"澳门特别行政区"}
        ],
      },
      datas: [],
      radio: 0,
      // activeName: "first",
      // tableData:[],
      sort: {prop: 'sale', order: 'descending'},
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getData() {
      axios.get("http://47.108.201.43:3000/api/getActivityData", {
        params: {}
      }).then((res)=>{
        if(res.data.code == "200") {
          this.datas = res.data.res;
        }
      });
    },
    queryF() {
      if(this.gets.province == "全部省份") {
        this.getData();
      } else {
        axios.post("http://47.108.201.43:3000/api/queryActivityData", {
          province: this.gets.province
        }).then((res)=>{
          // console.log(res);
          if(res.data.code == "200") {
          this.datas = res.data.resoult;
          }
        })
      }
    },
    changeOrder(){
      // if(this.radio == 1) {
      //   this.sort.order = 'descending';
      // }
      // else if(this.radio == 2) {
      //   this.sort.order = 'ascending';
      // }
    },
  }
}
</script>

<style scoped>
.province-active-box {
  padding-top: 30px;
}

.select-box {
  margin-left: 30px;
  width: inherit;
  text-align: center;
}
.province-box {
  display: flex;
}
.select1 {
  margin-right: 50px;
  width: 400px;
}
.areas-box {
  display: flex;
  align-items: center;
}
.time-box {
  width: 450px;
  display: flex;
  align-items: center;
}

.active-time {
  display: flex;
  align-items: center;
  margin: 30px 0 0 30px;
}
.block-year {
  display: flex;
  align-items: center;
}
.block-month {
  display: flex;
  align-items: center;
  margin-left: 100px;
}
.el-date-editor.el-input {
  width: 150px;
}


.sort-box {
  display: flex;
  margin: 30px;
}
.el-radio-group {
  display: flex;
  align-items: center;
}

.myTable {
  margin-left: 10px;
  margin-right: 10px;
  padding-top: 14px;
}
</style>